<template>
  <div id="layout">
    <van-nav-bar
      class="header"
      :title="title"
      :right-text="rightText"
      :left-arrow="leftArrow"
      :border="false"
      :fixed="true"
      :z-index="zIndex"
      @click-left="$router.back()"
      @click-right="$emit('click-right')"
    >
      <template #left>
        <slot name="left"></slot>
      </template>
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 标题
    title: String,
    // 右侧文案
    rightText: String,
    // 是否显示左侧箭头
    leftArrow: {
      type: Boolean,
      default: false,
    },
    // 头部的css对象
    h: Object,
    // 头部的背景色
    bgColor: String,
    // 身体的样式
    bodyStyle: Object,
    // 是否监听滚动条事件
    backScroll: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: 5,
    },
  },
};
</script>

<style lang="less">
#layout {
  > .van-nav-bar {
    background: transparent;

    .van-nav-bar__content {
      height: 1.76rem;

      .van-nav-bar__left {
        .van-icon {
          color: rgba(51, 51, 51, 1);
        }

        .van-nav-bar__arrow {
          font-size: 0.72rem;
          font-weight: bold;
        }
      }

      .van-nav-bar__title {
        font-size: 0.64rem;
        line-height: 0.88rem;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

      .van-nav-bar__right {
        img {
          display: block;
        }
      }
    }
  }

  > .nav-body {
    position: relative;
    padding-top: 1.76rem;
    min-height: calc(100vh - 1.76rem);
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
  }
}
</style>